/*================ Variable ================*/
/*============================================================================
  Grid Breakpoints and Class Names
    - Do not change the variable names
    - Breakpoint pixel values are used in the window.theme.breakpoints object
==============================================================================*/
$grid-medium: 750px;
$grid-large: 990px;
$grid-widescreen: 1400px;
$grid-gutter: 30px;
$grid-gutter-mobile: 22px;

$small: 'small';
$medium: 'medium';
$medium-down: 'medium-down';
$medium-up: 'medium-up';
$large: 'large';
$large-down: 'large-down';
$large-up: 'large-up';
$widescreen: 'widescreen';

/*============================================================================
  Generate breakpoint-specific column widths and push classes
    - Default column widths: $grid-breakpoint-has-widths: ($small, $medium-up);
    - Default is no push classes
==============================================================================*/
$grid-breakpoint-has-widths: ($small, $medium-up);
$grid-breakpoint-has-push: ($small, $medium-up);

/*================ Color Variables ================*/

// Text colors
$color-text: {{ settings.color_text }};
$color-text-shadow: rgba(0,0,0,0.4);
$color-body-text: {{ settings.color_body_text }};
$color-sale-text: {{ settings.color_sale_text }};
$color-small-button-text-border: {{ settings.color_small_button_text_border }};
$color-text-field: {{ settings.color_text_field }};
$color-text-field-text: {{ settings.color_text_field_text }};
$color-navigation-text: {{ settings.color_text }};

// Button colors
$color-btn-primary: {{ settings.color_button }};
$color-btn-primary-text: {{ settings.color_button_text }};

// Hover and focus states
$color-text-focus: adaptiveColor({{ settings.color_text }}, {{ settings.color_text | color_brightness }});
$color-overlay-text-focus: adaptiveColor({{ settings.color_image_overlay_text }}, {{ settings.color_image_overlay_text | color_brightness }});
$color-btn-primary-focus: adaptiveColor({{ settings.color_button }}, {{ settings.color_button | color_brightness }});
$color-btn-social-focus: adaptiveColor({{ settings.color_borders }}, {{ settings.color_borders | color_brightness }});
$color-small-button-text-border-focus: adaptiveColor({{ settings.color_small_button_text_border }}, {{ settings.color_small_button_text_border | color_brightness }});

// Link buttons and secondary cta
$color-link: $color-body-text;
$opacity-link-hover: 0.6;
$transition-link-hover: 0.1s cubic-bezier(0.44, 0.13, 0.48, 0.87);

// Backgrounds
$color-body: {{ settings.color_body_bg }};
$color-bg: {{ settings.color_body_bg }};
$color-drawer-background: rgba(0, 0, 0, 0.6);
$color-bg-alt: {{ settings.color_body_text | color_modify: 'alpha', 0.05 }};

// Overlays
$color-overlay-title-text: {{ settings.color_image_overlay_text }};
$color-image-overlay: {{ settings.color_image_overlay }};
$opacity-image-overlay: {{ settings.image_overlay_opacity | divided_by: 100.00 }};

{%- comment -%}
  Based on the image overlay opacity, either lighten or darken the image on hover
{%- endcomment -%}
{% assign image_overlay_opacity = settings.image_overlay_opacity | divided_by: 100.00 %};

{% if image_overlay_opacity > 0.85 %}
  {% assign image_overlay_opacity_hover = image_overlay_opacity | minus: 0.3 %};
{% else %}
  {% assign image_overlay_opacity_hover = image_overlay_opacity | plus: 0.4 %};
{% endif %}
$hover-overlay-opacity: {{ image_overlay_opacity_hover | at_most: 1 }};

// Border colors
$color-border: {{ settings.color_borders }};
$color-border-form: {{ settings.color_text_field_border }};

// Helper colors for form error states
$color-disabled: #f4f4f4;
$color-disabled-border: #f4f4f4;
$color-error: #d20000;
$color-error-message-list: #651818;
$color-error-bg: #fff8f8;
$color-success: #1F873D;
$color-success-bg: #f8fff9;

// Forms
$color-form-text: #333;
$color-error-input-text: $color-error;
$input-padding-top-bottom: 10px;
$input-padding-left-right: 18px;
$input-padding-top-bottom-small: 8px;
$input-padding-left-right-small: 15px;
$input-group-height: 46px;
$input-group-height-small: 42px;

// Social icons
$color-facebook: #3b5998;
$color-twitter: #00aced;
$color-pinterest: #cb2027;

/*================ Sizing Variables ================*/
$width-site: 1200px;
$gutter-site: 55px;
$gutter-site-mobile: 22px;
$section-spacing: 55px;
$section-spacing-small: 35px;
$border-radius: 2px;

/*================ Footer Variables ================*/
$footer-spacing-extra-small: 5px;
$footer-spacing-small: 15px;
$footer-wrapper-spacing: 18px;
$footer-hr-bottom-spacing: 20px;
$footer-spacing-medium: 25px;
$footer-spacing-large: 45px;

/*================ Z-Index ================*/
$z-index-dropdown : 7;
$z-index-sub-nav: 8;
$z-index-drawer: 9;
$z-index-announcement-bar: 10;
$z-index-skip-to-content: 10000; // really high to be safe of app markup

/*================ SVG ================*/
$svg-select-icon: #{'{{ "ico-select.svg" | asset_url }}'};

/*================ Drawers ================*/
$transition-drawer: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1);

/*================ Hero Slider ================*/
$color-slideshow-arrows: #000;
$color-slideshow-dots: #fff;

/*================ Typography ================*/

{% assign header_font = settings.type_header_font %}
{% assign base_font = settings.type_base_font %}

{{ header_font | font_face }}
{{ base_font | font_face }}

{% if settings.type_bold_product_titles %}
  {%- assign header_font_bold = header_font | font_modify: 'weight', 'bolder' -%}
{% endif %}

{%- assign base_font_bolder = base_font | font_modify: 'weight', 'bolder' -%}
{%- assign base_font_bold = base_font | font_modify: 'weight', 'bold' -%}
{%- assign base_font_italic = base_font | font_modify: 'style', 'italic' -%}
{%- assign base_font_bold_italic = base_font_bold | font_modify: 'style', 'italic' -%}

{{ header_font_bold | font_face }}
{{ base_font_bold | font_face }}
{{ base_font_bolder | font_face }}
{{ base_font_italic | font_face }}
{{ base_font_bold_italic | font_face }}

$font-weight-body--bold: {{ base_font_bold.weight | default: 700 }};
$font-weight-body--bolder: {{ base_font_bolder.weight | default: 700 }};
$font-weight-header--bold: {{ header_font_bold.weight | default: 700 }};

$font-stack-header: {{ header_font.family }}, {{ header_font.fallback_families }};
$font-style-header: {{ header_font.style }};
$font-weight-header: {{ header_font.weight }};

$font-stack-body: {{ base_font.family }}, {{ base_font.fallback_families }};
$font-style-body: {{ base_font.style }};
$font-weight-body: {{ base_font.weight }};

$font-size-header: {{ settings.type_header_base_size }} * 1px;
$font-bold-titles: {{ settings.type_bold_product_titles }};

$font-size-base: {{ settings.type_base_size }}px; // Henceforth known as 1em

$font-stack-cart-notification: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;

$font-size-mobile-input: 16px; // min 16px to prevent zooming

/*================ Gift Cards ================*/
$color-giftcard-tooltip-fallback: #333;
$color-giftcard-light: #fff;
$color-giftcard-tooltip: rgba(0, 0, 0, 0.9);
$color-giftcard-disabled: #999;
$color-giftcard-small-text: #b3b3b3;
$color-giftcard-shadow: rgba(0, 0, 0, 0.1);
$color-giftcard-print-bg: #fff;
$color-giftcard-print: #000;
$color-giftcard-bg: #e95e61;

/*================ Z-index ================*/
$z-index-giftcard-image: 2;
$z-index-giftcard-corners: 3;
$z-index-giftcard-tooltip: 4;
$z-index-giftcard-code: 5;



/*================ #Giftcard Template ================*/

.giftcard__apple-wallet-image {
  display: block;
  margin: 0 auto;
}

/*================ Print Giftcard Styles ================*/
@media print {
  @page {
    margin: 0.5cm;
  }

  p {
    orphans: 3;
    widows: 3;
  }

  html,
  body {
    background-color: $color-giftcard-light;
    color: $color-giftcard-print;
  }

  .giftcard__print-link,
  .giftcard__apple-wallet {
    display: none;
  }
}

/*================ Custom Giftcard Styles ================*/
.template-giftcard {
  background: $color-body;

  .site-header__logo {
    padding-left: 0;
  }

  .site-header__logo-image {
    max-width: 200px;
  }

  .wrapper {
    max-width: 588px;

    img,
    object,
    iframe {
      max-width: 100%;
    }
  }
}

.giftcard-wrapper {
  max-width: 31rem;
  margin: 0 auto;
}

.giftcard__header {
  margin-top: $gutter-site * 2;
}

.giftcard__tag--active {
  opacity: 0.6;
}

/*================ Gift Card image ================*/
.giftcard__wrap {
  position: relative;
  margin: ($gutter-site / 2) ($gutter-site / 2) $gutter-site;
  background-color: $color-giftcard-bg;
  border-radius: 10px;

  img {
    position: relative;
    display: block;
    border-radius: 10px;
    z-index: $z-index-giftcard-image;
  }

  // White corner caps that overlap gift card image
  &::before,
  &::after {
    content: '';
    position: absolute;
    width: 47px; // asset width
    height: 47px; // asset width
    z-index: $z-index-giftcard-corners;
  }

  &::before {
    background: url('') 0 0 no-repeat;
    top: -1px;
    left: -1px;
  }

  &::after {
    background: url('') 0 0 no-repeat;
    bottom: -1px;
    right: -1px;
  }
}

/*================ Gift card code ================*/
.giftcard__code {
  position: relative;
  text-align: center;
  width: 90%;
  z-index: $z-index-giftcard-code;
  margin: -70px auto 0px auto;
  padding: 0 0 18px 0;
}

.giftcard__code--medium {
  font-size: 0.875em;
}

.giftcard__code--small {
  font-size: 0.75em;
}

.giftcard__code__inner {
  display: inline-block;
  vertical-align: baseline;
  background-color: $color-giftcard-light;
  padding: 0.5em;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 0 1px $color-giftcard-shadow;
  box-shadow: 0 0 0 1px $color-giftcard-shadow;
}

.giftcard__code__text {
  font-size: 1.875em;
  text-transform: uppercase;
  border: 1px dashed $color-border-form;
  padding: 0.4em 0.5em;
  display: inline-block;
  vertical-align: baseline;
  line-height: 1;
  text-align: center;
  width: 100%;

  &.disabled {
    color: $color-giftcard-disabled;
    text-decoration: line-through;
  }
}

/*================ Gift card amount ================*/
.giftcard__amount {
  position: absolute;
  top: 0;
  right: 0;
  color: $color-giftcard-light;
  font-size: 2.75em;
  line-height: 1.2;
  padding: 10px;
  z-index: $z-index-giftcard-code;

  strong {
    display: block;
    text-shadow: 2px 2px 0 $color-giftcard-shadow;
  }
}

.giftcard__amount--medium {
  font-size: 2em;
}

/*================ Tooltip ================*/
.giftcard__tooltip {
  display: block;
  position: absolute;
  top: -50%;
  right: 50%;
  margin-top: 16px;
  z-index: $z-index-giftcard-tooltip;
  color: $color-giftcard-light;
  text-align: center;
  white-space: nowrap;

  &::before {
    content: '';
    display: block;
    position: absolute;
    left: 100%;
    bottom: 0;
    width: 0;
    height: 0;
    margin-left: -5px;
    margin-bottom: -5px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 5px solid $color-giftcard-tooltip-fallback;
    border-top: 5px solid $color-giftcard-tooltip;
  }
}

.giftcard__tooltip-label {
  display: block;
  position: relative;
  right: -50%;
  border: 0;
  border-radius: 4px;
  background-color: $color-giftcard-tooltip-fallback;
  background-color: $color-giftcard-tooltip;
  min-height: 14px;
  font-size: 12px;
  text-decoration: none;
  line-height: 16px;
  text-shadow: none;
  padding: 0.5em 0.75em;
  margin-left: 0.25em;

  small {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: $color-giftcard-small-text;
    font-size: 0.875em;
  }
}

.giftcard-action-list {
  text-align: center;
}

.giftcard-action-list__item {
  margin: 0 0 ($section-spacing-small / 1.8);
}

/*================ QR code (print only) ================*/
.giftcard__qr-code {
  img {
    padding: 0;
    border: 1px solid $color-border;
    border-radius: 4px;
    margin: 0 auto $gutter-site;
  }
}

/*================ Medium-down width ================*/
@media screen and (max-width: 580px) {
  .giftcard {
    padding-top: $gutter-site * 2;
  }

  .print-link {
    display: none;
  }
}

/*================ Small width ================*/
@media screen and (max-width: 400px) {
  .giftcard__wrap::before,
  .giftcard__wrap::after {
    display: none;
  }

  .giftcard__code {
    font-size: 0.75em;
  }

  .giftcard__code--medium {
    font-size: 0.65em;
  }

  .giftcard__code--small {
    font-size: 0.55em;
  }
}


/*============================================================================
  #Print Styles
==============================================================================*/

@media print {
  .giftcard__actions,
  .giftcard__wrap::before,
  .giftcard__wrap::after,
  .giftcard__tooltip {
    display: none;
  }

  .shop-url {
    display: block;
    text-align: center;
  }

  .qr-code {
    display: block;
  }

  .print-link {
    display: none;
  }
  .giftcard__code {
    margin-top: -90px;
  }
}
